<script setup lang="ts">
import { ref, watch, inject } from 'vue'
import { useStore } from '../../stores/index'
import axios from '../../plugins/axiosInstance';
import { popMessageKey, popMessage } from '@/type'
import { postCreate } from '../../utils/api'
const popMessage = inject(popMessageKey) as popMessage

// const props = defineProps(['reload', 'switchOpen', 'open'])
const props = defineProps<{
    reload: Function,
    switchOpen: Function,
    open: Boolean
}>()
// 获取Url
const store = useStore()
const BaseUrl = store.getBaseUrl()

// 监听文本框内容是否超过限制
let textValue = ref('');
let isEnough = ref(false);
watch(textValue, (newVal) => {
    console.log(newVal.length);
    if (140 - newVal.length < 0) {
        isEnough.value = true;
    } else {
        isEnough.value = false;
    }
})

// 存储每个图片
const images = ref<File[]>([])
// 存储每个图片的临时路径
const tempImageUrls = ref<string[]>([])

// 清空存储临时文件的数组
const clearTemp = () => {
    images.value.length = 0
    tempImageUrls.value.length = 0
    textValue.value = ''
}

// 图片保存并回显
const selectImage = (e: any) => {
    // let file = e.target.files[0]
    for (let file of e.target.files) {
        tempImageUrls.value.push(URL.createObjectURL(file))
        // 保存到图片数组
        images.value.push(file)
    }
    
}
// 删除临时图片
const delteImage = (imageUrl: any) => {
    tempImageUrls.value.splice(tempImageUrls.value.indexOf(imageUrl), 1)
    images.value.splice(images.value.indexOf(imageUrl), 1)
}

// 图片上传
const upload = async (file: any) => {
    const formData = new FormData()
    formData.append('file', file)
    return axios({
        url: BaseUrl + '/common/upload',
        method: 'post',
        headers: {
            'Content-Type': 'multipart/form-data'
        },
        params: {
            fileType: 'image',
            format: file.name.split('.')[1]
        },
        data: formData
    })
}

// 发表动态
const send = async () => {
    if (textValue.value.length === 0) {
        popMessage('请输入内容', 'error')
        return;
    }
    if (textValue.value.length > 140) {
        popMessage('超出字数限制', 'error')
        return;
    }
    console.log(textValue.value);
    const imageUrls = ref<string[]>([])

    let promises = []
    // 将所有图片上传
    for (let file of images.value) {
        promises.push(upload(file))
    }
    const p = await Promise.all(promises)
    for (let imageUrl of p) {
        // 将promise转为实际数据
        imageUrls.value.push(imageUrl.data.data)
        console.log(imageUrl.data.data);
    }
    const post = postCreate(textValue.value, imageUrls.value)

    post.then(res => {
        // 成功分享动态
        console.log(res.data.msg)
        props.switchOpen()
        clearTemp()
        props.reload()
        popMessage('分享成功', 'success')

    }).catch(res => {
        console.log(res)
        console.log('未知错误')
    })
}

// 给取消按钮定制的函数
const cancel = () => {
    clearTemp()
    props.switchOpen()
}

</script>

<template>
    <div class="mask" v-if="open">
        <div class="model-box">
            <div class="title">
                <div>分享
                    <i @click="props.switchOpen">X</i>
                </div>
            </div>
            <div class="model-main">
                <div class="text-warp">
                    <textarea placeholder="一起来聊聊吧~" v-model="textValue"></textarea>
                </div>
                <div class="cmt-btns">
                    <div class="btn-left">
                        <div class="emoji">
                            <svg t="1701613046076" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="8388" width="18px" height="18px">
                                <path d="M336 421m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="8389">
                                </path>
                                <path d="M688 421m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="8390">
                                </path>
                                <path
                                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2-44.3-18.7-84.1-45.6-118.3-79.8-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8c18.7-44.3 45.6-84.1 79.8-118.3 34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2 44.3 18.7 84.1 45.6 118.3 79.8 34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8c-18.7 44.3-45.6 84.1-79.8 118.2z"
                                    p-id="8391"></path>
                                <path
                                    d="M664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-0.3-4.2-3.9-7.4-8.1-7.4H360c-4.6 0-8.2 3.8-8 8.4 4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6c0.2-4.6-3.4-8.4-8-8.4z"
                                    p-id="8392"></path>
                            </svg>
                        </div>
                        <label class="img" for="image">
                            <svg t="1701690274413" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="4320" width="19px" height="19px">
                                <path d="M704 426.666667a64 64 0 1 0-64-64 64 64 0 0 0 64 64z" p-id="4321"></path>
                                <path
                                    d="M810.666667 128H213.333333a128 128 0 0 0-128 128v531.413333h1.706667A128 128 0 0 0 213.333333 896h597.333334a128 128 0 0 0 128-128V256a128 128 0 0 0-128-128zM170.666667 256a42.666667 42.666667 0 0 1 42.666666-42.666667h597.333334a42.666667 42.666667 0 0 1 42.666666 42.666667v292.48l-164.693333 81.92a14.08 14.08 0 0 1-18.773333-5.76l-67.413334-119.893333a97.92 97.92 0 0 0-62.08-47.573334 99.2 99.2 0 0 0-77.226666 11.733334L170.666667 650.88z m682.666666 512a42.666667 42.666667 0 0 1-42.666666 42.666667H213.333333a42.666667 42.666667 0 0 1-42.666666-42.666667v-16.64l337.493333-209.92a14.08 14.08 0 0 1 19.84 5.12l67.413333 119.893333a99.2 99.2 0 0 0 130.986667 40.32l128-64z"
                                    p-id="4322"></path>
                            </svg>
                        </label>
                    </div>
                    <div class="btn-right">
                        <span :class="{ enough: isEnough }">{{ 140 - textValue.length }}</span>
                    </div>
                </div>
                <ul class="img-list">
                    <li v-for="tempImageUrl in tempImageUrls">
                        <img :src="tempImageUrl" alt="">
                        <span class="del" @click="delteImage(tempImageUrl)"><img src="../../assets/delete.svg"></span>
                    </li>
                    <!-- <li><img src="../assets/image/miku.jpg" alt=""></li>
                    <li><img src="../assets/image/logo.jpg" alt=""></li> -->
                    <li v-if="tempImageUrls.length < 9">
                        <label for="image"><img src="../../assets/image/saveImage.png" alt=""></label>
                        <input @change="selectImage" type="file" multiple="true" id="image" accept="image/png, image/jpeg">
                    </li>
                </ul>
                <div class="send-btn">
                    <button class="yes" @click="send">分享</button>
                    <button class="no" @click="cancel">取消</button>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="css" scoped>
.mask {
    z-index: 9999;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    left: 0;
}

.model-box .title i {
    font-size: 15px;
    color: #FFFFFF;
    cursor: pointer;
    float: right;
    margin-right: 20px;
    text-decoration: none;
    font-style: normal;
}

.model-box .title {
    height: 35px;
    width: 100%;
    color: #FFFFFF;
    font-weight: bold;
    line-height: 35px;
    padding-left: 20px;
    box-sizing: border-box;
    background-color: #2D2D2D;
    border-top: #242424;
    border-radius: 5px 5px 0 0;
}

.model-box {
    --login-box-height: 329px;
    --login-box-width: 500px;
    position: absolute;
    display: flex;
    left: calc(50% - var(--login-box-width)/2);
    top: calc(36% - var(--login-box-height)/2);
    min-height: var(--login-box-height);
    width: var(--login-box-width);
    background-color: #FFFFFF;
    border-radius: 5px 5px 0 0;
    flex-direction: column;
}

.model-box .model-main {
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    height: 100%;
    padding: 20px 40px 20px;
}

.model-main .text-warp {
    width: 406px;
    padding: 5px 6px 6px 6px;
    /* padding-right: 14px; */
    border: 1px solid #D9D9D9;
    border-radius: 3px;
}

.text-warp textarea {
    display: block;
    border: none;
    resize: none;
    outline: none;
    width: 100%;
    height: 120px;

}


.cmt-btns {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    align-items: center;
}

.cmt-btns .btn-left {
    display: flex;

}

.cmt-btns .btn-left div {
    cursor: pointer;
    margin-right: 10px;
}

.cmt-btns .btn-left .emoji {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
}

.cmt-btns .btn-left .img {
    cursor: pointer;
}

.cmt-btns .btn-right span {
    font-size: 10px;
    color: #999;
    margin-right: 10px;
}

.cmt-btns .btn-right .enough {
    color: #C20C0C;
}

.model-main .send-btn {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.model-main .send-btn button {
    cursor: pointer;
    height: 30px;
    width: 80px;
    margin-right: 10px;
    color: #fff;

    border-radius: 3px;
    /* border: none; */
}

.model-main .send-btn button:hover {
    filter: brightness(1.1);
}

.model-main .send-btn .yes {
    border: 1px solid #5CA6E5;
    /* background: linear-gradient(to bottom, #5EA3E3, #3B88D1); */
    background: radial-gradient(circle at 50% 50%, #5EA3E3, #3B88D1);
}

.model-main .send-btn .no {
    color: #333;
    border: 1px solid #c3c3c3;
    background: linear-gradient(to bottom, #cfcfcf, #c3c3c3);
}

.img-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin-left: -12px;
    padding-left: 0;
}

.img-list li {
    margin: 12px 0 0 12px;
    width: 80px;
    height: 80px;
}

.img-list li img {
    width: 80px;
    height: 80px;
}

.img-list li .del {
    position: relative;
    top: -90px;
    left: 70px;
}

.img-list li .del img {
    cursor: pointer;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;

}

.img-list li label {
    display: block;
}

#image {
    display: none;
}
</style>